<template>
  <div class="aside qrcode">
    <div style="width: 99%; height: 100vh; overflow-y: auto">
      <div class="aside-container">
        <div class="aside-inner">
          <div class="aside-header">
            <div class="flex items-center">
              <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="QrcodeIcon" style="width: 1em; height: 1em; font-size: 28px;margin-right: 8px"><path d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H11V13H9V11M15,11H17V13H19V11H21V13H19V15H21V19H19V21H17V19H13V21H11V17H15V15H17V13H15V11M19,19V15H17V19H19M15,3H21V9H15V3M17,5V7H19V5H17M3,3H9V9H3V3M5,5V7H7V5H5M3,15H9V21H3V15M5,17V19H7V17H5Z"></path></svg>
              {{ t('flypass.qr-code') }} </div>
          </div>
          <hr
            style="
              margin-bottom: 16px;
              border-width: 0px 0px thin;
              border-style: solid;
              border-color: rgba(0, 0, 0, 0.12);
            "
          />   
          <div class="p-6">
            <div class="flex items-center">
              <el-switch :model-value="store.showBarcode" @change="onShowBarcodeChange" class="mr-4"></el-switch>
              <span>{{ t('flypass.show-barcode-on-pass') }}</span>
            </div>
            <div v-if="store.showBarcode">
              <div class="codes-container">
                <div class="code-box">
                  <button :class="{active: selectedBarCode === 'PKBarcodeFormatQR'}" @click="() => onSelectBarCode('PKBarcodeFormatQR')">
                    <img :src="mapImage.PKBarcodeFormatQR" alt="">
                    <span>{{ t('merchant.qr_code') }}</span>
                  </button>
                </div>
                <div class="code-box">
                  <button :class="{active: selectedBarCode === 'PKBarcodeFormatAztec'}"  @click="() => onSelectBarCode('PKBarcodeFormatAztec')">
                    <img :src="mapImage.PKBarcodeFormatQR" alt="">
                    <span>AZTEC</span>
                  </button>
                </div>
                <div class="code-box">
                  <button :class="{active: selectedBarCode === 'PKBarcodeFormatPDF417'}"  @click="() => onSelectBarCode('PKBarcodeFormatPDF417')">
                    <img :src="mapImage.PKBarcodeFormatPDF417" alt="">
                    <span>PDF 417</span>
                  </button>
                </div>
                <div class="code-box">
                  <button :class="{active: selectedBarCode === 'PKBarcodeFormatCode128'}"  @click="() => onSelectBarCode('PKBarcodeFormatCode128')">
                    <img :src="mapImage.PKBarcodeFormatCode128" alt="">
                    <span>CODE 128</span>
                  </button>
                </div>
              </div>

              <div v-if="passTemplate.barcodes && passTemplate.barcodes.length > 0">
                <el-form label-position="top">
                  <el-form-item :label="t('flypass.encoded-barcode-content')">
                    <el-input type="textarea" v-model="passTemplate.barcodes[0].messageEncoding"></el-input>
                  </el-form-item>

                  <el-form-item :label="t('flypass.text-below-barcode')">
                    <el-input type="textarea" v-model="passTemplate.barcodes[0].message"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePassStore } from '@/store/modules/pass'
import { mapImage } from './barCodeImage'
import { storeToRefs } from 'pinia'
import type { PKBarcodeFormat } from '@/api/pass/passModel'

type BarCodeType = PKBarcodeFormat

const { passTemplate } = storeToRefs(usePassStore() )
const store = usePassStore()
const { t } = useI18n()
const selectedBarCode = ref<BarCodeType | null>(null)

onMounted(() => {
  if(passTemplate.value.barcodes && passTemplate.value.barcodes.length > 0) {
    selectedBarCode.value = passTemplate.value.barcodes[0].format
  }
})

function onSelectBarCode(barcode: BarCodeType) {
  selectedBarCode.value = barcode
  store.setBarCodeImage(mapImage[barcode])
  if(store.passTemplate.barcodes){
    store.setBarCode([{...store.passTemplate.barcodes[0], format: barcode}])
  }
}
function onShowBarcodeChange(value: boolean) {
  store.setShowBarcode(value)
  if(value) {
    store.setBarCode([{
      altText: '',
      format: 'PKBarcodeFormatCode128',
      message: 'pid',
      messageEncoding: '${pid}'
    }])
  } else {
    store.setBarCode(null)
  }
}

</script>

<style lang="scss" scoped>
@import url('./styles/index.scss');

.qrcode {
  --Grid-columns: 12;
  --Grid-columnSpacing: 16px;
  --Grid-rowSpacing: 16px;
}

.codes-container {
  display: flex;
  flex-flow: wrap;  
  margin-top: 16px;
  .code-box {    
    flex-grow: 0;
    flex-basis: auto;
    width: calc(100%* 6 / var(--Grid-columns));
    min-width: 0px;
    box-sizing: border-box;
    padding: calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2);

    button {
      width: 100%;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      border: 1px solid var(--color-brand);
      padding: 16px;
      &.active {
        background-color: var(--color-geekblue-1);;
      }
    }
  }
}
</style>
